<template>
  <div>
    <div class="banner"></div>
    <div class="news-list">
      <ul class="list-nav">
        <router-link to="news-enterprise"
          ><li :class="now == '/news/news-enterprise' ? 'active' : ''">
            企业新闻
          </li></router-link
        >
        <router-link to="news-trade"
          ><li :class="now == '/news/news-trade' ? 'active' : ''">
            行业新闻 <Icon type="ios-arrow-dropright" class="icon" /></li
        ></router-link>
        <router-link to="news-info"
          ><li :class="now == '/news/news-info' ? 'active' : ''">
         环境信息公开 <Icon type="ios-arrow-dropright" class="icon" /></li
        ></router-link>
      </ul>
      <div class="list-content">
        <router-view />
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      now: "",
    };
  },
  mounted() {
    this.now = this.$route.path;
  },
  // 内容更新时候左侧导航栏激活状态于当前路由地址一样
  updated() {
    this.now = this.$route.path;
  },
};
</script>
  
  <style lang="scss" scoped>
.banner {
  width: var(--width);
  height: 30vh;
  background-image: url("http://www.jl-oled.com/Uploads/Picture/2019-03-27/5c9aee95619ed.jpg");
  background-position: center;
  background-size: cover;
}
.news-list {
  margin: 20px auto;
  width: var(--wrap);
  display: flex;
  justify-content: space-between;
  .list-nav {
    li {
      position: relative;
      margin-bottom: 5px;
      padding-left: 10px;
      width: 250px;
      height: 50px;
      line-height: 50px;
      background-color: #eee;
      color: #333;
      font-size: 16px;
      user-select: none;
      &:hover {
        color: #eee;
        background-image: url("http://www.jl-oled.com/Public/Home/images/012.jpg");
      }
      &.active {
        color: #eee;
        background-image: url("http://www.jl-oled.com/Public/Home/images/012.jpg");
      }
      .icon {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
  }
  .list-content {
    width: calc(var(--wrap) - 20px - 250px);
  }
}
</style>
  
  